<div id="content">
	<ul class="featured-item">
	</ul>
</div>

<div id="sidebar">
	<ul class="menu">
		{if $isStylist}
			<li id='clients'>
			</li>
		{/if}
		<li id='order_states'>
		</li>
	</ul>
</div>

<style>
	.featured-item .order_state {
		color: #4169E1;
		position: absolute;
		padding:5px;
		top:260px;
		left:90px;
		width: 100px;
		text-align:center;
		border: 1px solid #4169E1;
	}
	
	#change_state {
		text-align:right;
	}
	
	#change_state .selectArea {
		width:200px;
		margin-left:270px;
		margin-top:4px;
	}
</style>

{literal}
<script id='ordered_tpl' type="text/x-jsmart-tmpl">
	{foreach $items as $item}
	<li item_id='{$item[1]}' order_id='{$item[0]}'>
		<a href="#" class="visual"><img orig='{$item[3]}'></a>
		<a href="#" class="product_title">{$item[4]}</a>
		<strong>{price_fmt price=$item[5]}</strong>
		<strong class='order_state'>{$item[9]}</strong>
		<br>
		<span class='date'>{if $showClientName}{$item[12]} {/if}{$item[11]}</span>
	</li>
	{foreachelse}
		<div style='text-align:center; color: #999;'>
			Нет вещей отвечающих выбранным параметрам
		</div>
	{/foreach}
</script>

<script id='order_tpl' type="text/x-jsmart-tmpl">
	<div id='shop_item'>
		<div class="btn-box">
			<ul class="btn-list" id='image_browse'>
				<li><a class="btn1 inactive" href="#" title='Предыдущее изображение'>Previous Image</a></li>
				<li><a class="btn2 inactive" href="#" title='Следующее изображение'>Next Image</a></li>
				<li><a class="btn3" href="#" title='Открыть изображение' target=_blank style='display:none;'>Open Image</a></li>
			</ul>
		</div>
		<div class='image'>
			<div></div>
		</div>
		<div class='brand'>{$product.brandname}</div>
		<div class='price'>{price_fmt price=$product.price}</div>
		<div style='text-align:right;'>
			{if $isStylist}
				<div id='change_state'>
					<div class="select-holder" style='width:200px' id='select_state'></div> <button id='set_order_state'>УСТАНОВИТЬ</button>
				</div>
			{else}
				{if $product.order_state_id == 1 || $product.order_state_id == 2 || $product.order_state_id == 3}
					<button id='cancel_order'>ОТМЕНИТЬ</button>
				{/if}
			{/if}
		</div>
	</div>
</script>
{/literal}

<script>
	var ordersFilter = {};
	
	function openOrderItem(product_id, order_id) {
		call('admin.findByKey',{ 'vid':'ordered_items', 'k':order_id }).done(function(product){
			popup(
				'Заказ',
				$('#order_tpl').html().fetch({ 'product':product, 'isStylist':isStylist })
			);
			
			$('#popupBox .image div').gallery({
				'item_id': product_id,
				'prev': '#popupBox .btn1',
				'next': '#popupBox .btn2',
				'open': '#popupBox .btn3, #popupBox .image'
			});

			if (isStylist) {
				$('#select_state').dropDown({ 'options':{$orderStates},  'value':product.order_state_id,  'input_name':'stateId' });
			}
			
			$('#popupBox').find('#cancel_order').click(function(e){
				call('admin.doAction',{ 'id':'cancel_order', 'params':{ 'id':order_id } }).done(function(){ 
					hidePopup(); 
					showGallery(); 
					updateCart();
				});
			});
			
			$('#popupBox').find('#set_order_state').click(function(e){
				var newState = $('#popupBox input[name=stateId]').val();
				call('admin.doAction',{ 'id':'admin_order_edit', 'params':{ 'state_id':newState, 'id':order_id } }).done(function(){ 
					hidePopup(); 
					showGallery(); 
					updateCart();
				});
			});
		});
	}
	
	function showGallery() {
		call('admin.getList',{ 'id':'ordered_items', 'filter':ordersFilter }).done(function(items) {
		
			$('#content ul').empty().append($('#ordered_tpl').html().fetch({ 'items':items, 'showClientName':(isStylist ? ('client_id' in ordersFilter ? 0 : 1) : 0) }));

			$('#content ul li a img').each(function(i){
				var img = $(this);
				call('image.getThumbnail', { 'path':img.attr('orig'), 'width':150, 'height':200 } ).done(function(thumbnail){
					img.attr('src',thumbnail);
				});
			});

			$('#content ul li a').click(function(e){ 
				e.preventDefault(); 
				openOrderItem($(e.target).closest('li').attr('item_id'), $(e.target).closest('li').attr('order_id')); 
			});
			
			call('session.set',{ 'name':'orders_filter', 'value':ordersFilter });
		} );
	}
	
	$(function() {
		call('session.get',{ 'name':'orders_filter' }).done(function(filter){
			if (filter) {
				ordersFilter = filter;
			}
			
			{if $isStylist}
				$('#clients').opener({
					'title': 'КЛИЕНТЫ',
					'list': clients,
					'onClick': function(v) { ordersFilter.client_id = v;  showGallery(); },
					'onSecondClick': function() { delete ordersFilter.client_id; showGallery(); },
					'value': clientId
				});
			{else}
				 ordersFilter.client_id = clientId;
			{/if}
			
			$('#order_states').opener({
				'title': 'СТАТУС ЗАКАЗА',
				'list': {$orderStates},
				'onClick': function(v){ ordersFilter.order_state_id=v; showGallery(); },
				'onSecondClick': function(){ delete ordersFilter.order_state_id; showGallery(); },
				'value': ordersFilter.order_state_id
			});

			showGallery();
		});
	} );
	
</script>